跳到主要内容

-- 前端的方向

Create by fall on 07 Apr 2024 Recently revised in 07 Apr 2024

用技术去放大人们的需求。 ---- Alan Kay

如果你一开始做的就是低代码、可视化大屏、地图、智慧城市脑图、编辑器、微信小程序、音视频这种特征比较明显的方向的话，继续深耕就好了。如果你不仅仅满足于前端，也对后端感兴趣的话，可以考虑 web 全栈，但是这里还是会建议说先把前端的基础掌握好，这样的话一专多能的T型人才也是很受欢迎的。如果你对一套代码多端运行有兴趣，可以考虑跨端方向。 如果你像我一样，发现自己不在上面任何一个选项里，那就专心做工程化方向吧。

低代码​

可视化大屏​

地图​

智慧城市脑图​

编辑器​

文本编辑器，需要注意各个细节，优化用户编辑体验，快捷键

小程序​

使用 web 标准，加上各类小程序提供的可以操作本地内容的 API，实现移动端的开发

音频视屏​

web 全栈​

跨端方向​

工程化方向​

前端技术分类​

node 框架​

基于 node 作为后端的框架

  • Next.js：The React Framework
  • tRPC：Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
  • Nest：A progressive Node.js framework, server-side applications on top of TypeScript
  • Remix：Create modern, resilient user experiences with web fundamentals.
  • Strapi：It’s 100% JavaScript, fully customizable and developer-first.
  • SvelteKit：web development, streamlined
  • Directus：Directus is an instant REST + GraphQL API
  • Redwood：The App Framework for Startups
  • Nuxt：create full-stack web apps and websites with Vue 3.
  • Fastify：Fast and low overhead web framework, for Node.js
  • Express：Fast, unopinionated, minimalist web framework for node.
  • Keystone：The most powerful headless CMS for Node.js — built with GraphQL and React

SSG​

将 markdown 或者数据库生成一系列 html 网页

  • Next.js：The React Framework
  • Gatsby：The fastest frontend for the headless web, with React.
  • Nuxt： Create type-safe, production-grade apps and websites with Vue 3.
  • Docusaurus：Easy to maintain open source documentation websites.（开发者友好，专注于 md 文件生成文档，比其他应用配置更少）
  • Hexo：A fast, simple & powerful blog framework, powered by Node.js.
  • Astro：Astro is the all-in-one web framework designed for speed(zero JavaScript by default)（静态网站，很少的 js，多框架支持）
  • Eleventy：Transforms a directory of templates (of varying types) into HTML. Generates static pages from templates
  • VitePress：Vite & Vue powered static site generator.
  • Nextra：Simple and flexible site generation framework with everything you love from Next.js.
  • Outstatic：Static site CMS that lives inside your Next.js install.

前端部署​

  • Netllify：给出你的 GitHub & GitLib 项目路径，你的配置，就可以完成项目部署，提供 CDN，支持 serverless，100G 带宽，6小时构建时间
  • Vercel：workflow 集成，部署简单，只要是个项目就行，几乎所有流行框架支持，100G 带宽，构建时间 10 小时
  • Replit：基于浏览器的协作 IDE，你会被锁定在这个框架内，所有免费的部署都运行在 512M 内存的机器中，在线合作，500 M 免费存储
  • Fly.io：聚焦在 container 的部署，160G 带宽，3G 持续化部署内存
  • Qovery：对于没有云部署经验，推荐，1个用户有 10 个 app 限制，GitHub 自动部署
  • Render：适合已经打包好的应用，使用你的 docker 容器，静态网站，web app，数据库，1G 内存，100G 带宽，400小时构建时间
  • koyeb：简单部署 2G 内存，部署的时候，你的项目仍能使用，提供一些项目模版
  • Fleek：P2P，Web3
  • GitHub Pages：你不能部署全栈 App，但是 个人项目，博客，文档

参考文章​

作者（文章名称）链接
Hosting for Developers: 11 Platforms With a Free Plan
https://stackdiary.com/node-js-frameworks/
https://stackdiary.com/static-site-generators/